/*
 *@description:资讯评论
 *@Author:@reynold
 *@Date:2025-03-22 11:03:41
 *@Update:2025-03-22 11:03:41
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div>
      <div class="header">
        <div class="header_box1">
          <el-button class="btn1" size="mini" @click="search">批量删除</el-button>
        </div>
        <div class="header_box">
          <el-input v-model="input" size="mini" placeholder="请输入关键字"></el-input>
        </div>
        <div class="header_box2">
          <el-button class="btn2" size="mini" @click="search">查询</el-button>
        </div>
      </div>
      <div class="content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="infocontent"
            label="评论内容"
            width="500">
          </el-table-column>
          <el-table-column
            prop="personId"
            label="评论人编号">
          </el-table-column>
          <el-table-column
            prop="informationId"
            label="资讯编号">
          </el-table-column>
          <el-table-column
            prop="informationTime"
            label="评论时间"
            width="180">
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status=='通过'" type="success" size="mini" effect="dark">{{scope.row.status}}</el-tag>
              <el-tag v-else-if="scope.row.status=='不通过'" type="danger" size="mini" effect="dark">{{scope.row.status}}</el-tag>
              <el-tag v-else type="info" size="mini" effect="dark">{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="140"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == '未审核'">
                <el-button class="columnBtn" type="text" size="small" @click="del(scope.row)">删除</el-button>
                <el-button class="columnBtn1" type="text" size="small" @click="pass(scope.row)">通过</el-button>
                <el-button class="columnBtn2" type="text" size="small" @click="notPass(scope.row)">不通过</el-button>
              </div>
              <div v-else>
                 <el-button class="columnBtn" type="text" size="small" @click="del(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return{
      input:'',
      tableData:[],
      pageQuery:{
        pageNum:1,
        pageSize:10
      },
      total:100,
      multipleSelection:[]
    }
  },
  methods:{
    // 初始序号
    initIndex(){
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },

    // 请求实名认证数据
    getData(){
      instance.post('/information/list',this.pageQuery).then(res=>{
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    // 按条件查找数据
    search(){
      console.log('按条件查数据');
    },
    // 删除评论
    del(scope){
      console.log('删除');
    },
    // 通过审核
    pass(scope){
      instance.post('/information/pass',scope.id).then(res=>{
        this.getData()
        utils.showSuccess(res.data.message)
      })
    },
    // 不通过审核
    notPass(scope){
      instance.post('/information/notpass',scope.id).then(res=>{
        this.getData()
        utils.showSuccess(res.data.message)
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageQuery.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.getData()
    }
  },
  created(){
    this.getData()
  },
  components:{
    Card
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  .header_box1{
    margin-right: 10px;
  }
  .header_box {
    margin-right: 10px;
  }
  .header_box2[data-v-1d90e1e3]{
    .el-button--mini{
      color: #fff;
      background-color: #188b8f;
      border: none;
    }
  }
  .header_box1[data-v-1d90e1e3] {
    .el-button--mini {
      background-color: #ff6464;
      color: #fff;
      border: none;
    }
  }
}
.content {
  .columnBtn{
    color: #d7ba7d;
  }
  .columnBtn1{
    color: #188b8f;
  }
  .columnBtn2{
    color: #ff6464;
  }
}
</style>